{extend name="extra@index/base" /}
{block name="title"}用户注册{/block}

{block name="css"}

{/block}

{block name='page'}
<style>/**页面css写在这里*/
.iconfont {
    font-size: .85rem;
}

.icon-xitongfanhui:before {
    padding-right: 0.75rem;
}

.card-header {
    background: #09F;
    color: white;
}

.list-block .item-title.label {
    width: 30%;
}

.list-block .item-media + .item-inner {
    margin-left: 0;
}

.close-btn {
    position: absolute;
    right: 14px;
    top: 8px;
    border-radius: 50%;
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 28px;
    color: #000;
    background: #ddd;

}

#msg {
    position: absolute;
    bottom: 0;
    border: 1px solid;
    margin: 12px;
    font-size: 12px;
    padding: 5px;
    border-radius: 5px;
    background: #fff;
}

.info {
    color: green;
}

.error {
    color: red;
}

.list-block li {
    transition: all .3s;
}

</style>
<!-- 页面开始 -->
<div id="vue">
    <div class="card-header">
        <span class="login"><span class="iconfont icon-xitongfanhui" onclick="$.router.back()">注册</span></span>
    </div>
    <div class="list-block">
        <ul>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-input">
                            <input id="username" type="text" placeholder="请输入用户名" style="padding-left: 0;height: 2.5rem"
                                   v-model="username">
                            <span class="close-btn" v-show="username!=''" @click="clean('username')">×</span>
                        </div>
                    </div>
                </div>
            </li>

            <li v-show="step>1">
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-input" style="position: relative">
                            <input id="mailAddress" type="email" placeholder="邮箱地址"
                                   style="padding-left: 0;width: 95%;height: 2.5rem" v-model="mailAddress"
                                   style="height: 2.5rem">
                            <span class="close-btn" v-show="mailAddress!=''" @click="clean('mailAddress')"
                                  style="">×</span>
                        </div>
                        <div class="col-50" style="float:right" v-if="step>2">
                            <a @click="mailregister" class="button  button-fill button-success">获取验证码</a>
                        </div>
                    </div>
                </div>
            </li>


            <li v-show="step>3">
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-input">
                            <input id="code" type="text" placeholder="请输入验证码" style="padding-left: 0;height: 2.5rem"
                                   v-model="code">
                            <span class="close-btn" v-show="code!=''" @click="clean('code')">×</span>
                        </div>
                    </div>
                </div>
            </li>
            <li v-show="step>4">
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-input">
                            <input id="password" type="text" placeholder="设置一个密码" style="padding-left: 0;height: 2.5rem"
                                   v-model="password">
                            <span class="close-btn" v-show="password!=''" @click="clean('password')">×</span>
                        </div>
                    </div>
                </div>
            </li>


        </ul>


        <div class="content-block" v-if="step>5" style="margin: 2rem 1.5rem 0 2rem;">
            <div class="row">

                <a href="#" class="button button-big button-fill button-success" @click="reg">注册</a>
            </div>
        </div>

    </div>


    <div v-show="msgText" id="msg" :class="msgType">{{msgText}}</div>
</div>

<script>

    var vm = new Vue({
        el: '#vue',
        data: function () {
            return {
                username: '',
                mailAddress: '',
                code: '',
                password: '',
                msgText: "请输入用户名",
                msgType: 'info',
                step: 1
            }
        },
        methods: {
            clean: function (name) {
                switch (name) {
                    case 'username':
                        vm.username = '';
                        break;
                    case 'mailAddress':
                        vm.mailAddress = '';
                        break;
                    case 'password':
                        vm.password = '';
                        break;
                    case 'code':
                        vm.code = '';
                        break;
                }
            },
            mailregister: function () {
                $.showPreloader('正在发送邮件')
                $.get('/api/my/getCode', {
                    account: vm.mailAddress,
                    type: 'email'
                }, function (ret) {
                    if (ret.code > 0) {
                        vm.step = 4;
                        vm.msg('请输入验证码', 'info');
                    }
                    $.toast(ret.msg);
                    $.hidePreloader();
                })


            },
            msg: function (msg, type) {

                vm.msgText = (msg);
                vm.msgType = type;
            },
            reg: function () {
                if (vm.step != 6) {
                    $.alert("信息不完整");
                } else {

                    $.showPreloader('正在注册')


                    $.post('/api/my/do_reg', vm.$data, function (ret) {


                        $.hidePreloader();
                        $.alert(ret.msg)
                        if (ret.code > 0) {
                            setTimeout("location.href='/'", 2000);
                        }
                    })
                }
            }
        },
        watch: {
            mailAddress: function (v) {
                var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z]{2,4})+$/;
                if (reg.test(vm.mailAddress)) {
                    vm.msg("邮箱填写正确", 'info');
                    vm.step = 3;
                } else {
                    vm.msg("邮箱格式错误！请输入正确的邮箱地址！", 'error');
                    vm.step = 2;
                }
            },
            username: function (v) {
                var _this = this;
                if (v == '') {
                    vm.msg("请输入用户名", 'error');
                    return vm.step = 1;
                } else {
                    $.showIndicator();
                    $.get('/api/my/checkaccount', {'account': v}, function (ret) {

                        $.hideIndicator();
                        if (ret.code > 0) {
                            _this.msg("用户名可用,请输入邮件", 'info');
                            return vm.step = 2;
                        } else {
                            _this.msg(ret.msg, 'error');
                            return vm.step = 1;
                        }
                    })
                }
            },
            code: function (v) {
                if (v.length > 3) {
                    vm.step = 5;
                    vm.msg("请设置密码", 'info');
                } else {
                    vm.step = 4;
                    vm.msg("验证码最少4位", 'error');
                }
            },
            password: function (v) {
                if (v.length > 3) {
                    vm.step = 6;
                    vm.msg("密码可用,点击注册", 'info');
                } else {
                    vm.step = 5;
                    vm.msg("密码长度不能小于4位", 'error');
                }
            }

        }
    })


    $("nav").hide()


</script>


<!-- 页面结束 -->
{/block}

{block name="base"}
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal theme-dark" id='panel-left'>
    <!-- 左边侧栏开始 -->

    <!-- 左边侧栏结束 -->
</div>
{/block}


{block name="js"}

{/block}